<%--
  Created by IntelliJ IDEA.
  User: 劳寄修
  Date: 2021/2/20
  Time: 10:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <script type="text/javascript"  charset="utf-8" src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.min.js"></script>
    <link type="text/css" href="${pageContext.request.contextPath}/static/bootstrap4/css/bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/login/htmleaf-demo.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/login/style-1.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/toastr.min.css">
    <script  type="text/javascript" src="${pageContext.request.contextPath}/static/js/toastr.min.js"></script>

    <style>
        *{

            margin: 0px;
            padding: 0px;
        }
        body{
            background-repeat: no-repeat;
            background-size: 100%;
            /*overflow-x: hidden;*/
            /*overflow-y: hidden;*/
        }



		::-webkit-scrollbar {/* 隐藏滚动条 */
			        width: 0px;
			        height: 4px;
		}


     /*   #main{
            height: 800px;
            width: 900px;
            margin: 300px auto;

        }*/
        .left{
            background-color: aqua;
            float: left;
            height: 400px;
            width: 400px;
            border-radius: 10px;
        }
        .reight{
            background-color: white;
            float: right;
            height: 400px;
            width: 500px;
            border-radius: 0px 10px  10px  0px;


        }
        .reight .text{
            margin: 100px auto;
            align-content: center;
        }

        #main .left span{
            top: 25px;
            right: 35px;
        }

        .toast-center-center {
            top: 50%;
            left: 50%;
            margin-top: -30px;
            margin-left: -150px;
        }

    </style>

</head>
<body >

<!--style=" background-image: url('${pageContext.request.contextPath}/static/images/bg/img6.jpg');"  -->
<div id="main" class="ui-dialog">
    <div class="left rounded-sm" style="background: url('${pageContext.request.contextPath}/static/images/bg/img1.png');height: 400px;">
        <div class="container">
            <div class="row" style="height: 170px;"></div>
            <div class="row">
                <div class="col-12 col-md-12 text-center text-white">
                    <p id="sb" style="font-size: 33px;">欢迎使用设备管理系统</p>
                </div>
            </div>
            <div class="row">
                <div class="col-12 col-md-12 text-center text-white">
                    <p > Welcome to device management</p>
                </div>
            </div>
        </div>
    </div>

    <div class="reight container">

        <form class="text ml-5">
            <div class="form-group row">
                <div class="col-sm-10">
                    <input type="text" class="ui-dialog-input ui-dialog-input-username" id="admin" style="width: 280px;"  placeholder="请输入账号">
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-10">
                    <input type="password" class="ui-dialog-input ui-dialog-input-password" id="pwd" style="width: 280px;" placeholder="请输入密码">
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-3">
                    <input type="text" class="ui-dialog-input float-left m-0" id="vCode" style="width: 100px;" placeholder="验证码">
                </div>
                <div class="col-sm-3 ml-1" style="height: 40px;">
                    <img src="${pageContext.request.contextPath}/people/post" style="width: 100%;height: 100%;" id="myz"/>
                </div>
                <div class="col-sm-3">
                    <a href="javascript:VCodeRefresh()">换一张</a>
                </div>
            </div>
            <div class="form-group row">


            </div>
            <div class="form-group row">
                <div class="col-5 col-sm-5">
                    <a class="ui-dialog-submit" href="#" onclick="subAdmin()"  style="width: 280px;">立即登录</a>
                </div>
            </div>
            <div>


                <div class="form-group row">
                    <div class="col-sm-9  " >
                        <a href="${pageContext.request.contextPath}/pj/register">立即注册</a>
                        <a href="#">忘记密码？</a>
                    </div>
                </div>

            </div>
        </form>

    </div>
</div>



</body>

    <script type="text/javascript">
        var PrefixPath="${pageContext.request.contextPath}";
        var vCode=$("#validationCode").val();

        function VCodeRefresh() {
            $("#myz").prop("src", "${pageContext.request.contextPath}/people/post?t=" + new Date().getTime());//为了避免浏览器的缓存机制，改变参数
        }


        //提交登录
        function subAdmin() {

            /*$("#sub_input").click(function () {*/
                var vCode= $("#vCode").val();//取填写的验证码
                var name=$("#admin").val();//账号
                var pwd=$("#pwd").val();//密码

                if (name.trim()==""||name==null){
                    toastr.warning("请输入账号");
                    return;
                }

                if (pwd.trim()==""||pwd==null){
                    toastr.warning("密码不可为空");
                    return;
                }


                if (vCode.trim()==""||vCode==null){
                    toastr.warning("请填入验证码");
                    return;
                }


                var url="${pageContext.request.contextPath}/people/vCode";
                var flag=true;
                //开启同步
                $.ajaxSettings.async=false;
                $.post(url,{"str":vCode},function (data) {
                    var f= JSON.parse(data);
                    if (!f.state){
                        toastr.error("验证码有误！");
                        //刷新验证码
                         VCodeRefresh();
                        flag=false;
                        return;
                    }
                });

              if(flag==false)return;
              //关闭同步
                $.ajaxSettings.async=true;
                var url2="${pageContext.request.contextPath}/admin/login";

                var msg={"username":name,"pwd":pwd};

               $.ajax({
                    type:"post",
                    dataType:"json",
                    contentType:"application/json;charset=utf-8",
                    url:url2,
                    data:JSON.stringify(msg),
                    success:function (data) {
                        if (data.state){
                           VCodeRefresh();
                            location.assign("${pageContext.request.contextPath}/ms/index");
                        }else {
                            toastr.error("账号或密码有误");
                            VCodeRefresh();
                        }

                    },
                    error:function () {
                        toastr.error("服务器异常");
                    }

                });

        }



        customTips();


        //提示居中
        function customTips() {
            toastr.options = {
                closeButton: false, //是否显示关闭按钮
                debug: false, //是否使用debug模式
                positionClass: "toast-center-center",//弹出窗的位置
                showDuration: 300,//显示的动画时间
                hideDuration: 1000,//消失的动画时间
                timeOut: 5000, //展现时间
                extendedTimeOut: 1000,//加长展示时间
                showEasing: "swing",//显示时的动画缓冲方式
                hideEasing: "linear",//消失时的动画缓冲方式
                showMethod: "fadeIn",//显示时的动画方式
                hideMethod: "fadeOut" //消失时的动画方式
            };
        }

    </script>



</html>
